import React, {Component} from 'react';
import './index.css';
import axios from "axios";

class Search extends Component {

    //假数据
    toData= {
        "incomplete results": false,//不完整数据
        "items":[
            {
                // 头像
                "avatar_url": "https://avatars1.githubusercontent.com/u/11722920?v=4",
                "id": 11722920,
                "login": "atguigu",
                //个人主页
                "html_url": "https://github.com/atguigu"
            }
        ],
        "total_count": 207
    }
    search= () => {
        //函数体，获取用户输入，
        //连续解构赋值
        const {keyWordElement:{value:keyWord}} = this
        //更新状态
        this.props.updateAppSate({
            isFirst:false,
            isLoading:true
        })
        // 发送网络请求--接口有问题 无法请求成功
        axios.get(`https://api.github.com/search/user?q=${keyWord}`).then(
            response => {
                console.log('成功了',response.data);
                this.props.updateAppSate({
                    isFirst:false,
                    isLoading:false,
                    users:response.data.items
                })
            },
            error => {
                console.log('失败了',error)
                this.props.updateAppSate({
                    isFirst:false,
                    isLoading:false,
                    err:'请求出错了'
                    //err:error.message //提示不能指定obj 需要一个准确的值
                })
            }
        )
        // this.props.saveUsers(this.toData.items)
    }




    render() {
        return (
            <section className='jumbotron'>
                <h3 className='jumbotron-heading'>搜索 Github 用户</h3>
                <div>
                    <input ref={c=>this.keyWordElement=c} type="text" placeholder={"请输入你要搜索的名字"}/>
                    <button onClick={this.search}>搜索</button>
                </div>
            </section>
        );
    }
}

export default Search;